<template>
    <div-row :obj="obj" class="News">
        <el-tabs v-if="tabList.length" v-model="activeName" :type="obj.tabType" :tab-position="obj.tabPosition" @tab-click="_getNewsByState">
            <el-tab-pane v-loading="loading" v-for="(tab,index) in tabList" :label="tab.tableName" :name="tab.tableCode" :key="index">
                <div class="search-box">
                    <div class="search-input">
                        <el-input placeholder="请输入标题" v-model="searchTitle" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                </div>
                <ul class="news-list">
                    <li v-for="(news,i) in newsList" :key="i">
                        <span class="title">{{news.title}}</span>
                        <span class="time">{{news.createTime}}</span>
                    </li>
                </ul>
            </el-tab-pane>
        </el-tabs>
    </div-row>
</template>
<script>
import { getNews,getNewsByState } from '@/api/api'
export default {
    title: 'News',
    props: {
        obj: {
            type: Object
        }
    },
    data() {
        return {
            tabList: [],
            newsList: [],
            activeName: '',
            searchTitle: '',
            loading: true
        }
    },
    created() {
        this._getNews();
    },
    watch: {
        searchTitle(newValue, oldValue) {
			this._getNewsByState();
		}
    },
    methods: {
        _getNews() {
            getNews()
                .then((response) => {
                    if (response.rcode == '0000') {
                        this.loading = false;
                        this.tabList = response.data;
                        this.newsList = this.tabList[0].data;
                        this.activeName = this.tabList[0].tableCode;
                    }
                })
        },
        _getNewsByState() {
            this.loading = true;
            getNewsByState(this.activeName,this.searchTitle)
                .then((response) => {
                    if (response.rcode == '0000') {
                        this.loading = false;
                        this.newsList = response.data;
                    }
                })
        }
    }
}
</script>
<style lang="scss" scoped>
    .News{
        .el-tabs .el-tab-pane{
            overflow: hidden;
        }
        .news-list li{
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            padding: 8px 0;
            .title{
                color: #2962ff;
                cursor: pointer;
            }
            .time{
                color: #666;
            }
        }
        .search-box{
            text-align: right;
            margin: 10px 0;
            .search-input{
                display: inline-block;
                width: 500px;
               
            }
        }
    }
</style>
